import React from 'react';
import { Notify, Button, Icon } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';

export default () => {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: getStyles() }}></style>
      <DemoBlock title="通知一览">
        <Button type="primary" onClick={() => Notify.info('普通')}>
          常用
        </Button>
        <Button type="primary" onClick={() => Notify.success('成功通知')}>
          成功
        </Button>
        <Button type="primary" onClick={() => Notify.failed('失败通知')}>
          失败
        </Button>
        <Button
          type="primary"
          onClick={() => {
            Notify.animateSuccess('充值失败！');
          }}
        >
          动画成功
        </Button>
        <Button
          type="primary"
          onClick={() => Notify.animateFailed('动画失败通知', 1.5)}
        >
          动画失败
        </Button>
      </DemoBlock>
      <DemoBlock title="几秒后关闭">
        <Button
          type="primary"
          onClick={() => {
            Notify.loading('加载中', 0);
            setTimeout(() => {
              Notify.hide();
            }, 3000);
          }}
        >
          几秒后就关了
        </Button>
      </DemoBlock>
      <DemoBlock title="自定义通知内容">
        <Button
          type="primary"
          ripple
          onClick={() => {
            Notify.info(
              <div style={{ textAlign: 'center', paddingTop: '.13rem' }}>
                <Icon type="search" />
                <p style={{ margin: 0 }}>测试</p>
              </div>,
            );
          }}
        >
          自定义通知按钮
        </Button>
      </DemoBlock>
    </div>
  );
};

const getStyles = () => `
    .kiana-mei-button {
        margin-top: .1rem;
        margin-right: .1rem;
        display: inline-block;
    }
`;
